<template>
    <div class="xzzx-box">
        <div class="xzzx-box-content-item-title">
            <strong>下载中心</strong>
        </div>
        <el-divider content-position="center">
            <div class="line"></div>
        </el-divider>
        <div class="xzzx-box-content-item-content">
            <div class="download-list">
                <div v-for="(item, index) in downloadItems" :key="index" class="download-item"
                    @click="goToDetail(item.id)">
                    <span class="download-item-name">{{ item.name }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { downList } from '@/api/rjxt'

const downloadItems = ref([]);
const img = ref('')

const router = useRouter();

function goToDetail(id) {
    router.push({ name: 'fileDetail', params: { id: id } })
}

onMounted(() => {
    downList().then(res => {
        downloadItems.value = res.data.downList.map(item => {
            return {
                name: item.title,
                url: item.download_url,
                id: item.id
            }
        });
    });
});
</script>
<style scoped>
.ewmdl-banner {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* 媒体查询 手机 */
@media (max-width: 768px) {
    :deep(.el-divider--horizontal) {
        width: 100%;
    }

    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .xzzx-box {
        display: flex;
        flex-direction: column;
        align-content: center;
        /* height: 728px; */
        justify-content: center;
        align-items: center;
        margin-bottom: 70px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .xzzx-box-content-item-content {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        width: 380px;
    }

    .download-list {
        display: flex;
        flex-direction: column;
        width: 380px;
        max-width: 760px;
        margin: 20px 0;
    }

    .download-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-bottom: 10px;
        transition: background-color 0.3s;
    }

    .download-item:hover {
        background-color: #e6f7ff;
    }

    .download-item-name {
        font-size: 18px;
        color: #333;
    }

    .download-button {
        background-color: #3366cc;
        color: white;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .download-button:hover {
        background-color: #285a8e;
    }
}

/* 媒体查询 平板 */
@media (min-width: 769px) and (max-width: 1024px) {
    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .xzzx-box {
        display: flex;
        flex-direction: column;
        align-content: center;
        /* height: 728px; */
        justify-content: center;
        align-items: center;
        margin-bottom: 70px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .xzzx-box-content-item-content {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        width: 780px;
    }

    .download-list {
        display: flex;
        flex-direction: column;
        width: 780px;
        max-width: 780px;
        margin: 20px 0;
    }

    .download-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-bottom: 10px;
        transition: background-color 0.3s;
    }

    .download-item:hover {
        background-color: #e6f7ff;
    }

    .download-item-name {
        font-size: 18px;
        color: #333;
    }

    .download-button {
        background-color: #3366cc;
        color: white;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .download-button:hover {
        background-color: #285a8e;
    }
}

/* 媒体查询 电脑 */
@media screen and (min-width: 1025px) and (max-width: 1919px) {

    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .xzzx-box {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 250px;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .xzzx-box-content-item-content {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        width: 1200px;
    }

    .download-list {
        display: flex;
        flex-direction: column;
        width: 1200px;
        max-width: 1200px;
        margin: 20px 0;
    }

    .download-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-bottom: 15px;
        transition: background-color 0.3s;
    }

    .download-item:hover {
        background-color: #e6f7ff;
    }

    .download-item-name {
        font-size: 18px;
        color: #333;
    }

    .download-button {
        background-color: #3366cc;
        color: white;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .download-button:hover {
        background-color: #285a8e;
    }
}

@media (min-width: 1920px) {

    .xzzx-box-content-item-title {
        font-size: 34px;
        line-height: 1.75;
        color: #3366cc;
        text-align: center;
        margin-top: 50px;
    }

    .xzzx-box {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 250px;
        width: 100%;
        height: auto;
    }

    .line {
        display: block;
        margin: 0;
        margin-top: -0;
        padding: 0;
        top: 50%;
        width: 79px;
        height: 1px;
        font-size: 0;
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #3d85c6;
        -moz-box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -ms-box-shadow: 0 0 0 transparent;
        -o-box-shadow: 0 0 0 transparent;
        box-shadow: 0 0 0 transparent;
    }

    .xzzx-box-content-item-content {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        width: 80%;
    }

    .download-list {
        display: flex;
        flex-direction: column;
        width: 1920px;
        max-width: 5000px;
        margin: 20px 0;
    }

    .download-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        background-color: #f9f9f9;
        border-radius: 5px;
        margin-bottom: 15px;
        transition: background-color 0.3s;
    }

    .download-item:hover {
        background-color: #e6f7ff;
    }

    .download-item-name {
        font-size: 18px;
        color: #333;
    }

    .download-button {
        background-color: #3366cc;
        color: white;
        border: none;
        padding: 5px 15px;
        cursor: pointer;
        border-radius: 5px;
        transition: background-color 0.3s;
    }

    .download-button:hover {
        background-color: #285a8e;
    }
}
</style>
